<template>
    <div class="vd_cont" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="w_bg bd">
            <div class="pd_20">
                <div class="btn_list flexbox flexcenter flexjust">
                    <span class="ctn_btn active">人员消耗</span>
                    <span class="ctn_btn" @click="switchTab('/projectcountv2')">项目消耗</span>
                </div>
                <div class="serch_box">
                    <el-input placeholder="请输入人员名称进行搜索" v-model="search" clearable class="input-with-select">
                        <el-button slot="append" @click="filteredData(search,tableData)">
                            <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.5259 13.8475L18.5054 16.8263C18.8311 17.1518 18.8311 17.6798 18.5055 18.0054C18.1799 18.331 17.652 18.331 17.3264 18.0053L14.3476 15.0258C13.0199 16.0901 11.3684 16.669 9.66675 16.6666C5.52675 16.6666 2.16675 13.3066 2.16675 9.16663C2.16675 5.02663 5.52675 1.66663 9.66675 1.66663C13.8067 1.66663 17.1667 5.02663 17.1667 9.16663C17.1692 10.8683 16.5903 12.5197 15.5259 13.8475ZM13.8542 13.2291C14.9118 12.1415 15.5025 10.6837 15.5001 9.16663C15.5001 5.94329 12.8892 3.33329 9.66675 3.33329C6.44341 3.33329 3.83341 5.94329 3.83341 9.16663C3.83341 12.3891 6.44341 15 9.66675 15C11.1838 15.0023 12.6417 14.4117 13.7292 13.3541L13.8542 13.2291Z" fill="white" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4999 9.16668C15.4999 5.94334 12.8891 3.33334 9.66655 3.33334C6.44322 3.33334 3.83322 5.94334 3.83322 9.16668C3.83322 12.3892 6.44322 15 9.66655 15C11.1836 15.0024 12.6415 14.4118 13.7291 13.3542L13.8541 13.2292C14.9116 12.1416 15.5023 10.6837 15.4999 9.16668ZM15.7924 13.8313L18.6466 16.6849C19.0504 17.0886 19.0504 17.7431 18.6467 18.1468C18.243 18.5506 17.5884 18.5505 17.1848 18.1468L14.3312 15.2925C12.9929 16.3148 11.3536 16.8691 9.66627 16.8667C5.41594 16.8665 1.96655 13.417 1.96655 9.16668C1.96655 4.91622 5.4161 1.46667 9.66655 1.46667C13.9169 1.46667 17.3664 4.91606 17.3666 9.16639M15.7924 13.8313C16.8146 12.4931 17.3689 10.8537 17.3666 9.16639Z" fill="white" />
                            </svg>
                        </el-button>
                    </el-input>
                </div>
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-radio-group v-model="queryInfo.job" size="small" @change="getDataList()">
                            <el-radio-button label="editor_uid">剪辑</el-radio-button>
                            <el-radio-button label="director_uid">编导</el-radio-button>
                            <el-radio-button label="photographer_uid">拍摄</el-radio-button>
                        </el-radio-group>
                        <el-date-picker style="width:260px;margin-left:12px" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryInfo.need_date" type="daterange" :clearable="false" size="small" @change="getDataList()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <el-button plain size="small" class="plain_blue" @click="downloadFile">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出数据
                        </div>
                    </el-button>
                </div>
                <div class="met_tips">
                    <div :class="{'is_coll':!is_coll}">
                        <div class="tips_top flexbox flexcenter">
                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3335 7.16683C13.3335 9.43606 11.9163 11.3743 9.91864 12.1447H8.00014H6.08164C4.08401 11.3743 2.66681 9.43606 2.66681 7.16683C2.66681 4.2213 5.05461 1.8335 8.00014 1.8335C10.9457 1.8335 13.3335 4.2213 13.3335 7.16683Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.91827 12.1445L9.6919 14.861C9.6775 15.0338 9.53307 15.1667 9.3597 15.1667H6.6398C6.46644 15.1667 6.322 15.0338 6.30764 14.861L6.08124 12.1445" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M5.59998 5.2998V8.4998L7.99998 6.8998L10.4 8.4998V5.2998" stroke="white" stroke-width="1.12" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Tips
                        </div>
                        <p class="tips_text">该消耗数据包含千川、UD、巨量、京易投的数据。其中千川的数据来自千川分析，巨量的数据来自巨量引擎。</p>
                        <div class="tips_top flexbox flexcenter" style="margin-top:12px">
                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66681 8.83333C4.66681 6.9924 6.15921 5.5 8.00014 5.5C9.84108 5.5 11.3335 6.9924 11.3335 8.83333V14.1667H4.66681V8.83333Z" fill="#FE6262" stroke="#FE6262" stroke-width="1.33333" stroke-linejoin="round" />
                                <path d="M8 2.1665V3.1665" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M11.9639 3.60938L11.3211 4.37543" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14.0731 7.26221L13.0883 7.43587" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M1.92694 7.2627L2.91175 7.43633" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4.03595 3.60938L4.67875 4.37543" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M2 14.1665H14.3333" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Warning
                        </div>
                        <p class="tips_text">1、同一个素材中，由于拍摄可能存在多人参与，该消耗根据人数做平均分配。假设A素材消耗1w，拍摄是甲和乙两个人，则甲和乙的消耗分别为5000；假设B素材消耗3w，拍摄是甲乙丙三个人，则甲乙丙三人的消耗分别都为1w；假设C素材消耗1w，拍摄只有甲一个人，则甲的消耗是1w。</p>
                        <p class="tips_text">2、消耗数据（短视频消耗、直播消耗、总消耗）算的是在指定日期范围内产生的所有素材消耗，并非在日期范围内产出素材的消耗。比如日期取11月1号-11月20号，A素材生产在8月并且在11月有消耗，那么该A素材的消耗也纳入在其中。</p>
                        <p class="tips_text">3、2022年11月22日新增视频条数、卡审数、平均消耗功能。其中视频条数指的是在指定范围内生产出素材的中条数；卡审数是视频条数中卡审部分的数目；平均消耗=总消耗/视频条数。</p>
                        <p class="tips_text">4、2023年07月07日新增绩效视频条数（排除修改和微调）、原创视频条数。绩效视频条数和原创视频条数的统计范围均是以素材的生产日期为基准。</p>
                        <p class="tips_text">5、2024年03月04日将京易投的数据纳入统计，并且关联人员剪辑小组、增加周期环比。周期根据本次时间跨度，计算出上个时间同样跨度的周期，举例本次时间为2024.03.01-03.03，则上个周期是2024.02.27-02.29。</p>
                    </div>
                    <div class="scoll_btl flexbox flexcenter flexjust" @click="isCollape">
                        <svg :class="{'svg_role':!is_coll}" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.0667 10.9331L7.98768 8.1331L4.93332 10.9331" stroke="#4475FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M11.0667 7.3335L7.98768 4.5335L4.93332 7.3335" stroke="#4475FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        {{is_coll?'收起内容':'展开内容'}}
                    </div>
                </div>
            </div>
            <div class="table_box">
                <el-table :data="filteredData(search,tableData)" class="com_table" ref="straRef">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="create_date" label="排名" width="80" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.rank==1">
                                <img src="../../assets/img/number_01.svg" alt="" class="rank_img">
                            </template>
                            <template v-else-if="scope.row.rank==2">
                                <img src="../../assets/img/number_02.svg" alt="" class="rank_img">
                            </template>
                            <template v-else-if="scope.row.rank==3">
                                <img src="../../assets/img/number_03.svg" alt="" class="rank_img">
                            </template>
                            <template v-else>
                                {{scope.row.rank}}
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="人员姓名" min-width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <span class="name_head">{{scope.row.nickname | keepOneNumS}}</span>
                                {{scope.row.nickname}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="editor_group" label="所在分组" width="140" v-if="queryInfo.job == 'editor_uid'">
                        <template slot="header" slot-scope="scope" >
                        <div class="flexbox flexcenter">
                            所在分组
                            <el-popover placement="bottom" width="50" trigger="click" popper-class="strategy_pop">
                                <el-checkbox-group v-model="status" class="stra_status" @change="changeStatus">
                                    <el-checkbox label="">全部</el-checkbox>
                                    <el-checkbox label="1">1组</el-checkbox>
                                    <el-checkbox label="2">2组</el-checkbox>
                                    <el-checkbox label="3">3组</el-checkbox>
                                    <el-checkbox label="4">4组</el-checkbox>
                                </el-checkbox-group>
                                <div slot="reference" class="rank_status" >
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.02806 3C2.61096 3 2.37722 3.48061 2.63474 3.80871L6.69332 8.97963C6.76243 9.06769 6.8 9.1764 6.8 9.28834V13.4085C6.8 13.5924 6.90096 13.7615 7.06286 13.8487L8.46286 14.6029C8.79598 14.7823 9.2 14.5411 9.2 14.1627V9.28834C9.2 9.1764 9.23757 9.06769 9.30668 8.97963L13.3653 3.80871C13.6228 3.48061 13.389 3 12.9719 3H3.02806Z" fill="inherit" />
                                    </svg>
                                </div>
                            </el-popover>
                        </div>
                        </template>
                        <template  slot-scope="scope" >
                            <div>
                                <div class="group-tag" v-if="scope.row.editor_group != 0">
                                    {{ scope.row.editor_group }} 组
                                </div>
                                <div class="group-tag" v-else>
                                    无
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="avg_cost" label="平均消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.avg_cost?scope.row.avg_cost:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="reject_num" label="卡审数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.reject_num?scope.row.reject_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_num" label="视频条数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.total_num?scope.row.total_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="performance_video_num" label="绩效视频条数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.performance_video_num?scope.row.performance_video_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="original_video_num" label="原创视频条数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.original_video_num?scope.row.original_video_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_video" label="短视频消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_video?scope.row.stat_cost_video:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_live" label="直播消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_live?scope.row.stat_cost_live:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="总消耗" width="180">
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost?scope.row.stat_cost:'0'}}</span>
                            <div class="cost_ratio">
                                <div>较上周期</div>
                                <div class="ratio" style="color: #00C271;" v-if="costrate(scope.row.stat_cost_rate) == 'dow'">
                                    <img src="../../assets/img/decline.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" style="color: #FE6262;" v-else-if="costrate(scope.row.stat_cost_rate) == 'up'">
                                    <img src="../../assets/img/rise.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" v-else>——</div>
                        </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="操作" width="140">
                        <template slot-scope="scope">
                            <el-link type="primary" 
                                     :underline="false" 
                                     @click="$router.push({
                                        path:'VideoDetailsv2',
                                        query:{ 
                                                'job': queryInfo.job,
                                                'need_date': queryInfo.need_date,
                                                'nickname':scope.row.nickname,
                                                'user_id':scope.row.user_id
                                            }})"
                            >项目详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            status:[],
            is_coll:false,
            search: "",
            loading: false,
            queryInfo: {
                need_date: [],
                job: "editor_uid",
                order: "desc",
                query: "",
            },
            total: 1,
            setpage: 1,
            tableData: [],
            copyTableData:[],
            pickerOptions: {
                disabledDate(time) {
                    let dateTime = new Date();
                    let nowTime =
                        dateTime.getHours() * 60 + dateTime.getMinutes();
                    if (nowTime > 740) {
                        return time.getTime() > Date.now() - 8.64e7;
                    } else {
                        return time.getTime() > Date.now() - 8.64e7 - 8.64e7;
                    }
                },
            },
        };
    },
    created() {
        this.getTimeFn();
        this.getDataList();
    },
    computed: {
        costrate(){
            return (data) => {
                if(data == 0){
                 return '-'
                }else if(data > 0){
                 return 'up'
                }else{
                 return 'dow'
                }
            }
        }
    },
    methods: {
        changeStatus(v) {
            if(v.length > 0){
              let kong =  v.find(element => element == '');
                if(kong == ''){
                        this.tableData =  this.copyTableData
                    }else{
                        this.tableData =  this.copyTableData.filter(e =>  v.includes(e.editor_group + ''))
                    }
                }else{
                 this.tableData =  this.copyTableData
                }
        },
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            that.queryInfo.need_date[0] = that.formatDate(start);
            that.queryInfo.need_date[1] = that.formatDate(end);
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        changeType(type) {
            this.queryInfo.job = type;
            this.getDataList();
        },

        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.nickname.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/dataList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.copyTableData = res.data.list;
                this.total = res.data.count;
            }
        },

        downloadFile() {
            let tHeader = ["人员姓名","所在分组","平均消耗","卡审数","视频条数","绩效视频条数","原创视频条数", "短视频消耗", "直播消耗", "总消耗",'总消耗比例'];
            let filterVal = [
                        "nickname",
                        'editor_group',
                        "avg_cost",
                        "reject_num",
                        "total_num",
                        "performance_video_num",
                        "original_video_num",
                        "stat_cost_video",
                        "stat_cost_live",
                        "stat_cost",
                        "stat_cost_rate"
                    ]
            if(this.queryInfo.job != "editor_uid"){
                tHeader.splice(1, 1);
                filterVal.splice(1, 1);
            }
            var excelDatas = [
                {
                    tHeader: tHeader,
                    filterVal: filterVal,
                    tableDatas: this.tableData.map(record => ({
                            ...record,
                            editor_group:record.editor_group ? record.editor_group + '组':'无',
                            stat_cost_rate: `${(record.stat_cost_rate * 100).toFixed(2)}%`,
                        })),
                    sheetName: "内容部门消耗统计",
                },
            ];
            downLoad(excelDatas, "内容部门消耗统计");
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 展开提示
        isCollape(){
            this.is_coll = !this.is_coll
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.cost_ratio{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #B4B7BD;
}
.ratio{
    padding-left: 8px;
    display: flex;
    /* align-items: center; */
}
.ratio img{
    padding-top: 2px;
    padding-right: 2px;
    width: 16px;
    height: 16px;
}
.group-tag{
    display: inline-block;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    padding: 0 10px;
}
.rank_status {
    fill: #95a5c9;
}
.rank_status.active {
    fill: #4475ff;
}
.stra_status .el-checkbox {
    display: block;
    margin-right: 0;
    padding: 5px;
}
.table_box {
    padding-top: 0;
    padding-bottom: 20px;
}
.btn_list {
    text-align: center;
}
.ctn_btn {
    font-size: 14px;
    color: #17233d;
    padding: 0 24px;
    line-height: 28px;
    border-radius: 30px;
    cursor: pointer;
}
.ctn_btn.active {
    color: #fff;
    background: #4475ff;
}
.serch_box {
    width: 430px;
    margin: 30px auto 34px;
}
.cost_font {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #17233d;
}
.name_head {
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: #4475ff;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.rank_img {
    display: block;
    margin: 0 auto;
}
.vd_cont {
    height: 100%;
    margin: -12px;
    padding: 12px;
    overflow-y: auto;
}
.met_tips {
    background: rgba(68, 117, 255, 0.03);
    border-radius: 2px;
    margin-top: 20px;
    padding: 12px 20px;
}
.tips_top {
    font-size: 12px;
    font-weight: bold;
}
.tips_top svg {
    margin-right: 8px;
}
.tips_text {
    font-size: 12px;
    color: #616c85;
    line-height: 16px;
    margin-top: 8px;
}
.scoll_btl {
    width: 100px;
    height: 32px;
    font-size: 12px;
    color: #4475ff;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 2px;
    cursor: pointer;
    margin-top: 12px;
}
.scoll_btl svg{
    margin-right: 5px;
}
.is_coll{
    height:95px;
    overflow: hidden;
}
.svg_role{
    transform: rotate(180deg);
}
</style>
<style>
.serch_box .el-input__inner {
    border: 2px solid #4475ff;
}
.serch_box .el-input-group__append,
.serch_box .el-input-group__prepend {
    background-color: #4475ff;
    border: 1px solid #4475ff;
}
.serch_box .el-button {
    padding: 10px 15px;
}
</style>


